<template>
	<el-container>
		<el-container class="is-vertical">
			<div class="panel-search-box">
				<div class="panel-search">
					<el-input v-model="search.agentName" placeholder="机构名称" clearable></el-input>
					<el-select v-model="search.status" placeholder="状态" clearable filterable class="w165">
						<el-option label="审核中" :value="1"></el-option>
						<el-option label="已打款" :value="2"></el-option>
						<el-option label="已驳回" :value="3"></el-option>
					</el-select>
					<el-date-picker v-model="search.createdAt" type="datetimerange"
						value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
						range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
						class="sDateSelect" style="margin-left:10px;"
					></el-date-picker>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
				</div>
			</div>
			<el-main class="nopadding">
				<scTable ref="table" :apiObj="$API.finance.log.list" :params="search" remoteSort @dataChange="dataChange">
					<el-table-column label="序号" prop="index" width="70" align="left"></el-table-column>
					<el-table-column label="机构">
						<template #default="scope">
							{{ scope.row.agent ? scope.row.agent.name : '' }}
						</template>
					</el-table-column>
					<el-table-column label="提现金额" align="center" width="100px">
						<template #default="scope">
							<span style="color: rgb(255, 170, 0);">{{ scope.row.amount }}</span>
						</template>
					</el-table-column>
					<el-table-column label="开户银行" align="center" width="120px">
						<template #default="scope">
							{{scope.row.account.bankFullName}}
						</template>
					</el-table-column>
					<el-table-column label="开户姓名" align="center" width="120px">
						<template #default="scope">
							{{scope.row.account.userName}}
						</template>
					</el-table-column>
					<el-table-column label="银行卡号" align="center" width="150px">
						<template #default="scope">
							{{scope.row.account.code}}
						</template>
					</el-table-column>
					<el-table-column label="状态" align="center" width="100px">
						<template #default="scope">
							<el-tag size="mini" v-if="scope.row.status.value == 1" type="warning">{{scope.row.status.name}}</el-tag>
							<el-tag size="mini" v-if="scope.row.status.value == 2" type="success">已打款</el-tag>
							<el-tag size="mini" v-if="scope.row.status.value == 3" type="danger">{{scope.row.status.name}}
								<template v-if="scope.row.status.remark">
									<el-tooltip class="box-item" effect="dark" :content="scope.row.status.remark" placement="top-end">
										<i style="cursor: pointer" class="el-icon-question table-msg" />
									</el-tooltip>
								</template>
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="申请时间" prop="createdAt" align="center" width="150px"></el-table-column>
					<el-table-column label="操作" fixed="right" align="center" width="200">
						<template #default="scope">
							<el-button type="text" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
							<el-divider direction="vertical" v-if="permission.audit && scope.row.status.value == 1"></el-divider>
							<template v-if="scope.row.status.value == 1">
								<el-button type="text" size="small" v-if="permission.audit" @click="table_audit(scope.row, 2)">打款</el-button>
								<el-divider direction="vertical" v-if="permission.audit"></el-divider>
								<el-button type="text" size="small" v-if="permission.audit" @click="table_audit(scope.row, 3)">驳回</el-button>
							</template>
						</template>
					</el-table-column>
				</scTable>
			</el-main>
		</el-container>
	</el-container>

	<detail v-if="dialog.detail" ref="detailDialog" @success="handleSuccess"></detail>
	<auditDialog v-if="dialog.audit" ref="auditDialog" @success="handleSuccess" @closed="dialog.audit=false"></auditDialog>
</template>

<script>
import {rolePermission} from '@/utils/permission'
import detail from '../detail.vue'
import auditDialog from '../components/audit-withdrawal.vue'

export default {
	name: 'message',
	components: {
		detail,
		auditDialog,
	},
	data() {
		return {
			loading: {
				remote: false
			},
			dialog: {
				detail: false,
				audit: false,
			},
			search: {
				type: 10,
				status: null,
				createdAt: null,
			},
			storeItems: [],
			permission: {
				audit: rolePermission('record-withdrawal-audit'),
			}
		}
	},
	created() {
	},
	mounted() {
	},
	methods: {
		// 搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		dataChange(res, tableData) {
			let total = res.data.total
			let perPage = res.data.perPage
			let page = (this.$refs.table && this.$refs.table.currentPage) || 1
			tableData.forEach((item, index) => {
				item.index = total - (page * perPage + index - perPage)
			})
		},
		//查看
		async table_show(row) {
			this.dialog.detail = true
			this.$nextTick(() => {
				this.$refs.detailDialog.open(row, 'first')
			})
		},
		//审核
		table_audit(row, status) {
			this.dialog.audit = true
			this.$nextTick(() => {
				this.$refs.auditDialog.open().setField('id', row.id).setField('status', status + '')
			})
		},
		//备注
		table_remark(row) {
			this.dialog.remark = true
			this.$nextTick(() => {
				let title = '备注'
				this.$refs.remarkDialog.open(title).setData(row)
			})
		},
		async loadingDefaultStore() {
			if (this.storeItems.length <= 1) {
				this.remoteStoreSearch('')
			}
		},
		async remoteStoreSearch(keyword) {
			this.loading.remote = true
			await this.$API.store.listKeyword.get({name: keyword}).then(res => {
                this.storeItems = res.data
            }).finally(() => {
				this.loading.remote = false
			})
		},
		//本地更新数据
		handleSuccess() {
			this.$refs.table.refresh()
		}
	}
}
</script>

<style scoped>
.panel-sFlex {
	display: flex;
	overflow: hidden;
}

.w165 {
	width: 165px;
}
</style>
